<template>
  <view class="section">
    <view class="content">
      <view class="box">
        <template v-if="isShowRequirement">
          <view class="introduction">
            {{ taskInfo.promptContent }}
          </view>
        </template>
        <template v-else>
          <view class="tips">
            <text>{{ doneCount }}/{{ questionCount }}</text>
          </view>
          <view class="subject">
            <template
              v-if="
                answerStatus === '1' ||
                answerStatus === '2' ||
                answerStatus === '3'
              "
            >
              <view class="subject_tips">
                <text>{{ questionInfo.tipTitle }}</text>
              </view>
              <view class="subject_image">
                <image :src="questionInfo.fileUrl" mode="widthFix"></image>
              </view>
            </template>
            <template v-else>
              <view class="subject_image">
                <image :src="questionInfo.fileUrl" mode="widthFix"></image>
              </view>
              <view class="subject_tips">{{ questionInfo.content }}</view>
              <view class="subject_tips">请在以下区域作答：</view>
              <view class="subject_container">
                <view
                  class="subject_content"
                  v-for="(item, index) in questionList"
                  :key="index"
                >
                  <view class="subject_title"
                    ><text>{{ index + 1 }}</text></view
                  >
                  <view class="subject_input">
                    <input type="text" v-model="item.choiceAnswer" />
                  </view>
                </view>
              </view>
            </template>
          </view>
        </template>
      </view>
    </view>
    <view class="operation">
      <view class="operation_progress">
        <u-circle-progress
          active-color="#2979ff"
          :percent="percent"
          width="104"
          border-width="4"
          bg-color="#e0e9f9"
          inactive-color="#e0e9f9"
        >
          <view class="operation_progress_content" @click="start()">
            <image
              v-show="playStatus"
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/suspend.png"
              mode="widthFix"
              style="width: 28rpx"
            ></image>
            <image
              v-show="!playStatus"
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFix"
              style="width: 30rpx"
            ></image>
          </view>
        </u-circle-progress>
      </view>
      <view class="operation_text">
        <template v-if="isShowRequirement">
          <text>答题要求播放中{{ countDown | timeFilter }}</text>
        </template>
        <template v-else>
          <text v-if="answerStatus === '1'"
            >答题要求播放中{{ countDown | timeFilter }}</text
          >
          <text v-else-if="answerStatus === '2'"
            >请阅读相关题目{{ tipsTime | timeFilter }}</text
          >
          <text v-else-if="answerStatus === '3'"
            >第{{ listenNumber }}遍{{ countDown | timeFilter }}</text
          >
          <text v-else-if="answerStatus === '4'"
            >答题要求播放中{{ countDown | timeFilter }}</text
          >
          <text v-else-if="answerStatus === '5'"
            >请输入答案{{ answerTime | timeFilter }}</text
          >
        </template>
      </view>
      <template v-if="type === '0'">
        <template v-if="isShowRequirement">
          <view class="operation_button" @click="skip()">
            <text>跳过</text>
          </view>
        </template>
        <template v-else>
          <view
            class="operation_button"
            @click="skip()"
            v-if="answerStatus === '5'"
          >
            <text>提交</text>
          </view>
          <view class="operation_button" @click="skip()" v-else>
            <text>跳过</text>
          </view>
        </template>
      </template>
      <template v-else>
        <view
          class="operation_button"
          @click="skip()"
          v-if="answerStatus === '5'"
        >
          <text>提交</text>
        </view>
        <view class="operation_noop" v-else> </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: "0",
    },
    taskInfo: {
      type: Object,
      default: null,
    },
    questionInfo: {
      type: Object,
      default: null,
    },
    questionList: {
      type: Array,
      default: () => [],
    },
    doneCount: {
      type: Number,
      default: 0,
    },
    questionCount: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    questionInfo() {
      this.initData();
      this.init();
    },
  },
  computed: {
    percent() {
      if (this.duration > 0) {
        return parseInt((this.currentTime / this.duration) * 100);
      }
    },
    countDown() {
      return parseInt(this.duration - this.currentTime);
    },
  },
  filters: {
    timeFilter(value) {
      let minute =
        Math.floor(value / 60) >= 10
          ? Math.floor(value / 60)
          : "0" + Math.floor(value / 60);
      value -= 60 * minute;
      let second = value >= 10 ? value : "0" + value;
      return minute + ":" + second;
    },
  },
  data() {
    return {
      answerStatus: "1",
      isShowRequirement: true,
      listenNumber: 1,
      frequency: 1,
      tipsTime: 0,
      answerTime: 0,
      timerId: null,
      audio: null,
      currentTime: 0,
      duration: 0,
      playStatus: false,
      isCanSkip: true,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.questionList.forEach((item) => {
        this.$set(item, "choiceAnswer", "");
      });
      this.initAudio();
      this.frequency = this.taskInfo.frequency;
      this.tipsTime = this.questionInfo.tipTime;
      this.answerTime = this.questionInfo.prepareTime;
    },
    initData() {
      this.answerStatus = "1";
      this.listenNumber = 1;
      this.playStatus = false;
    },
    initAudio() {
      let audioUrl = "";
      if (this.isShowRequirement) {
        audioUrl = this.taskInfo.promptAudio;
      } else {
        if (this.answerStatus === "1") {
          audioUrl = this.questionInfo.tipUrl;
        } else if (this.answerStatus === "2") {
          this.tipsTimer();
          return;
        } else if (this.answerStatus === "3") {
          audioUrl = this.questionInfo.prepareUrl;
        } else if (this.answerStatus === "4") {
          audioUrl = this.questionInfo.audioUrl;
        } else if (this.answerStatus === "5") {
          this.answerTimer();
          return;
        }
      }
      this.audio = uni.createInnerAudioContext();
      this.audio.src = audioUrl;
      this.onTimeUpdate();
      this.onCanplay();
      this.onEnded();
      this.start();
      uni.$on("stop", () => {
        this.audio.stop();
        this.playStatus = false;
      });
    },
    start() {
      //点击播放
      if (this.answerStatus === "2" || this.answerStatus === "5") return;
      if (this.playStatus) {
        this.audio.pause();
        this.playStatus = !this.playStatus;
      } else {
        this.audio.play();
        this.playStatus = !this.playStatus;
      }
    },
    pause() {
      uni.$emit("stop");
    },
    onCanplay() {
      //进入可播放状态
      this.audio.onCanplay(() => {
        this.audio.duration;
        setTimeout(() => {
          this.duration = this.audio.duration;
        }, 1000);
      });
    },
    onTimeUpdate() {
      //音频播放进度
      this.audio.onTimeUpdate(() => {
        if (!Number.isFinite(this.audio.duration)) {
          this.audio.currentTime = Number.MAX_SAFE_INTEGER;
          this.audio.currentTime = 0;
        } else {
          this.duration = this.audio.duration;
          this.currentTime = this.audio.currentTime;
        }
      });
    },
    onEnded() {
      //播放结束
      this.audio.onEnded(() => {
        this.skip();
      });
    },
    tipsTimer() {
      this.timerId = setInterval(() => {
        if (this.tipsTime > 0) {
          this.tipsTime--;
        } else {
          clearInterval(this.timerId);
          this.skip();
        }
      }, 1000);
    },
    answerTimer() {
      this.timerId = setInterval(() => {
        if (this.answerTime > 0) {
          this.answerTime--;
        } else {
          clearInterval(this.timerId);
          this.skip();
        }
      }, 1000);
    },
    skip() {
      if (!this.isCanSkip) return;
      this.isCanSkip = false;
      setTimeout(() => {
        this.isCanSkip = true;
      }, 1000);
      uni.$emit("stop");
      if (this.isShowRequirement) {
        this.isShowRequirement = !this.isShowRequirement;
      } else {
        if (this.answerStatus === "1") {
          this.answerStatus = "2";
        } else if (this.answerStatus === "2") {
          if (this.timerId) clearInterval(this.timerId);
          this.answerStatus = "3";
        } else if (this.answerStatus === "3") {
          this.listenNumber++;
          if (this.listenNumber > this.frequency) {
            this.answerStatus = "4";
          }
        } else if (this.answerStatus === "4") {
          this.answerStatus = "5";
        } else if (this.answerStatus === "5") {
          if (this.timerId) clearInterval(this.timerId);
          this.testSubmit();
          return;
        }
      }
      this.initAudio();
    },
    testSubmit() {
      let list = [];
      this.questionList.forEach((item) => {
        list.push({
          itemId: item.id,
          userAnswer: item.choiceAnswer,
          gotScore: item.choiceAnswer === item.optionAnswer ? item.score : 0,
        });
      });
      this.$emit("submit", list);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./ListeningRecord.scss";
</style>
